<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script th:src="@{/js/jquery-3.6.0.js}"></script>
  <script th:src="@{/js/template.js}"></script>
  <script>
    function getSelectedGoods() {
      let r = $("input[type=radio]:checked");
      let id = r.val();
      let name = r.parent().next().html();
      let price = r.parent().next().next().html();
      let lesson_num = r.parent().next().next().next().html();

      return {
        id, name, price, lesson_num
      }
    }

    $(function () {
      $("#test").click(function () {
        let course = getSelectedGoods();
        console.log(course);
      })

      //todo: 修改查询课程信息的URL
      $.getJSON("http://localhost:8085/edu/course/1/100", function (r) {
        if (r.code == 200) {
          // console.log(r);
          // console.log(r.data.records);
          let html = template("goodsTpl", {
            "data": r.data.records,
          });
          $("#goodsTable").append(html);
        }
      });
    })
  </script>
</head>
<body>
<script id="goodsTpl" type="text/html">
  {{each data as course}}
  <tr>
    <td><input type="radio" name="id" value="{{course.id}}"></td>
    <td>{{course.title}}</td>
    <td>{{course.price}}</td>
    <td>{{course.lessonNum}}</td>
    <td>{{course.buyCount}}</td>
  <tr>
    {{/each}}
</script>
<table id="goodsTable" border="1" aria-colspan="0">
  <tr>
    <th>请选择</th>
    <th>课程名</th>
    <th>课程价格</th>
    <th>课时数</th>
    <th>销售数量</th>
  </tr>
</table>
</body>
</html>